<template>
  <div>
    <header-comm></header-comm>
    <div class="bcg">
      <div class="cjwzym">
        <div class="cjwz_inp">
          <div>
            <a-button>
              <router-link to="/cjwz">返回</router-link>
            </a-button>
          </div>
          <ul>
            <li>
              <span class="inp_tit">
                <span class="bxred">*</span> 客户：
              </span>
              <a-select
                showSearch
                placeholder="请选择客户"
                optionFilterProp="children"
                style="width: 400px"
                @search="khmcSearch"
                @change="handleChange"
                :filterOption="false"
                :allowClear="true"
              >
                <a-select-option
                  :ref="item.GSMC"
                  v-for="(item,i) in GsmcList"
                  :key="i"
                  :sqdwid="item.SQDWID"
                  :value="item.GSMC"
                >{{item.GSMC}}</a-select-option>
              </a-select>
              <span class="fot_inp">
                &nbsp;
                <span class="bxred">*必填</span>
              </span>
            </li>
            <li>
              <span class="inp_tit">
                <span class="bxred">*</span> 绑定域名：
              </span>
              <a-input style="width: 400px" v-model="ymbd" placeholder="bad.com | bear.cn"></a-input>&nbsp;
              <span class="bxred">*必填</span>
            </li>
            <li>
              <span class="inp_tit">网站类型：</span>
              <a-radio-group @change="onChange" v-model="wzlxval">
                <a-radio value="工厂版">工厂版</a-radio>
                <a-radio value="商贸版">商贸版</a-radio>
                <a-radio value="高级分销版">高级分销版</a-radio>
              </a-radio-group>
            </li>
            <li>
              <span class="inp_tit">选择模板：</span>

              <a-radio-group v-if="wzlxval=='工厂版'" @change="xzmbrChange" v-model="xzmbr">
                <a-radio value="1">
                  <img class="mbimg" src="../../img/1.png" alt />
                </a-radio>
                <a-radio value="2">
                  <img class="mbimg" src="../../img/2.png" alt />
                </a-radio>
                <a-radio value="3">
                  <img class="mbimg" src="../../img/3.png" alt />
                </a-radio>
              </a-radio-group>

              <a-radio-group v-if="wzlxval=='商贸版' || wzlxval=='高级分销版' " @change="xzmbrChange" v-model="xzmbr">
                <a-radio value="4">
                  <img class="mbimg" src="../../img/4.png" alt />
                </a-radio>
                <a-radio value="5">
                  <img class="mbimg" src="../../img/5.png" alt />
                </a-radio>
                <a-radio value="6">
                  <img class="mbimg" src="../../img/6.png" alt />
                </a-radio>
              </a-radio-group>
            </li>
            <li>
              <span class="inp_tit">语言：</span>

              <a-checkbox-group
                :options="language"
                v-model="languagecheckedList"
                @change="langChange"
              />
            </li>
          </ul>
          <ul>
            <li class="yb">
              <span class="inp_tit">样本：</span>
              <a-radio-group @change="onChange" v-model="ybval">
                <a-radio :value="1">创建样本</a-radio>
                <br />
                <a-radio :value="2">对接样本</a-radio>
              </a-radio-group>

              <div class="qx">
                <a-checkbox-group v-model="checkedList" @change="ybqxChange">
                  <a-checkbox
                    :disabled="ybval!=2?true:false"
                    v-for="(item,i) in plainOptions "
                    :key="i"
                    :value="item.val"
                  >{{item.title}}</a-checkbox>
                </a-checkbox-group>
              </div>
            </li>
          </ul>
          <ul>
            <li>
              <span class="inp_tit">库存方式：</span>
              <a-checkbox-group :options="kc" @change="kcChange" />
            </li>
            <li>
              <span class="inp_tit">产品分类：</span>
              <a-checkbox
                :indeterminate="cpflindeterminate"
                @change="cpflonCheckAllChange"
                :checked="cpflcheckAll"
              >全选</a-checkbox>
              <a-checkbox-group :options="cpfl" v-model="cpflcheckedList" @change="cpflqxChange" />
            </li>
            <li>
              <span class="inp_tit">品牌：</span>
              <a-checkbox
                :indeterminate="ppindeterminate"
                @change="pponCheckAllChange"
                :checked="ppcheckAll"
              >全选</a-checkbox>
              <a-checkbox-group :options="pp" v-model="ppcheckedList" @change="ppChange" />
            </li>
          </ul>
          <ul>
            <li>
              <span class="inp_tit">文章分类：</span>
              <a-checkbox
                :indeterminate="indeterminate"
                @change="wzflonCheckAllChange"
                :checked="wzflcheckAll"
              >全选</a-checkbox>
              <a-checkbox-group :options="wzfl" v-model="wzflcheckedList" @change="wzflChange" />
            </li>

            <li>
              <span class="inp_tit">文章同步到佰联轴承网：</span>
              <a-radio-group @change="onChange" v-model="wztb">
                <a-radio value="是">是</a-radio>
                <a-radio value="否">否</a-radio>
              </a-radio-group>
            </li>
            <li>
              <span class="inp_tit">对接：</span>
              <a-checkbox-group :options="dj" @change="djChange" />
            </li>
          </ul>
          <ul>
            <li>
              <span class="inp_tit">应用领域内容：</span>
              <a-checkbox-group :options="ApplicationFields" @change="applactionChange" />
            </li>

            <li class="button">
              <a-button class="cjwz_sub" type="primary" @click="cjwzsub">创建网站</a-button>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import qs from "qs";
import headerComm from "../header-comm/header.vue";
const plainOptions = [
  { title: "NSK", val: "99453 " },
  { title: " NTN", val: "99453_NTN " },
  { title: "    LYC", val: "99453_LYC" },
  { title: "  HRB", val: "99453_HRB" },
  { title: " NMB", val: "99453_NMB" },
  { title: "    TPI", val: "99453_TPI" },
  { title: "  ZWZ", val: "99453_ZWZ" },
  { title: "  FAG", val: "99453_FAG" },
  { title: "   SKF", val: "99453_SKF" },
  { title: "  IKO", val: "99453_IKO" }
];

const dj = ["行业新闻", "轴承知识"];
const language = ["中文", "英文", "德文", "日文", "俄文"];

const defaultCheckedList = [];
const cpflCheckedList = [];
const ppCheckedList = [];
const wzflCheckedList = [];
const languageCheckedList = [];
export default {
  data() {
    return {
      //、、、、、、、、、input表单、、、、、、、、、、、、、、、、、、、、、、
      khmc: "", //1---1--客户名称------传值
      khsqdwid: "", //1---1--客户sqdwid------传值
      ymbd: "", //2------2---域名绑定
      wzlxval: "工厂版", //3----3-----网站类型
      xzmbr: "1", //4------4---------选择模板
      xzmbpicname: "template01", //4------4---------选择模板------传值
      wztb: "是", //5---5----文章同步到佰联轴承网
      ybval: 1, //6----6----样本
      djyblist: [], //6----6----对接样本数组------传值
      cpfllist: [], //7----7----产品分类数组
      pplist: [], //8----8----品牌分类数组
      wzfllist: [], //9----9----文章分类数组
      djlist: [], //10----10----对接数组
      langlist: [], //11----11----语言数组
      langnum: [], //11----11----语言数组
      //、、、、、、、、、、input表单、、、、、、、、、、、、、、、、、、、、
      applicationList: [], //应用领域数据
      checkedList: defaultCheckedList,
      cpflcheckedList: cpflCheckedList,
      ppcheckedList: ppCheckedList,
      wzflcheckedList: wzflCheckedList,
      languagecheckedList: languageCheckedList,

      indeterminate: true,
      cpflindeterminate: true,
      ppindeterminate: true,
      wzflindeterminate: true,

      checkAll: false,
      cpflcheckAll: false,
      ppcheckAll: false,
      wzflcheckAll: false,
      // checkAll: false,

      GsmcList: [], //客户列表
      khsearch: "", //客户搜索
      ProductList: [], //产品分类列表

      plainOptions,
      cpfl: [],
      pp: [],
      wzfl: [], //文章分类
      ApplicationFields: [], //应用领域文章标题
      dj,
      kc: ["导入", "软件"], //网站库存数据获取方式
      kclist: [], //库存对接方式改变值
      language
    };
  },

  methods: {
    handleChange(value) {
      this.khmc = value;

      for (var i = 0; i < this.GsmcList.length; i++) {
        if (value == this.GsmcList[i].GSMC) {
          this.khsqdwid = this.GsmcList[i].SQDWID;
        }
      }

      if (this.khmc == undefined || this.khmc == "") {
        this.khsqdwid = "";
        this.cpfl = [];
        this.pp = [];
      } else {
        this.getProductList(this.khsqdwid);
        this.getBrandList(this.khsqdwid);
      }
    },

    onChange(e) {},
    xzmbrChange(e) {
      this.xzmbpicname = e.target.value;

      let pic = "template0" + this.xzmbpicname;
      this.xzmbpicname = pic;
    },

    ybqxChange(checkedList) {
      this.indeterminate =
        !!checkedList.length && checkedList.length < plainOptions.length;
      this.checkAll = checkedList.length === plainOptions.length;

      this.djyblist = checkedList;
    },

    cpflqxChange(checkedList) {
      this.cpflindeterminate =
        !!checkedList.length && checkedList.length < this.cpfl.length;
      this.cpflcheckAll = checkedList.length === this.cpfl.length;
      this.cpfllist = checkedList;
    },
    cpflonCheckAllChange(e) {
      Object.assign(this, {
        cpflcheckedList: e.target.checked ? this.cpfl : [],
        cpflindeterminate: false,
        cpflcheckAll: e.target.checked
      });

      if (this.cpflcheckAll) {
        this.cpfllist = this.cpfl;
      } else {
        this.cpfllist = [];
      }
    },
    ppChange(checkedList) {
      this.ppindeterminate =
        !!checkedList.length && checkedList.length < this.pp.length;
      this.ppcheckAll = checkedList.length === this.pp.length;
      this.pplist = checkedList;
    },

    pponCheckAllChange(e) {
      Object.assign(this, {
        ppcheckedList: e.target.checked ? this.pp : [],
        ppindeterminate: false,
        ppcheckAll: e.target.checked
      });
      if (this.ppcheckAll) {
        this.pplist = this.pp;
      } else {
        this.pplist = [];
      }
    },

    applactionChange(checkedList) {
      // console.log('checkedList',checkedList)
      this.applicationList = checkedList;
    },

    //文章分类选中事件
    wzflChange(checkedList) {
      this.wzflindeterminate =
        !!checkedList.length && checkedList.length < this.wzfl.length;
      this.wzflcheckAll = checkedList.length === this.wzfl.length;
      this.wzfllist = checkedList;
    },
    wzflonCheckAllChange(e) {
      Object.assign(this, {
        wzflcheckedList: e.target.checked ? this.wzfl : [],
        wzflindeterminate: false,
        wzflcheckAll: e.target.checked
      });
      if (this.wzflcheckAll) {
        this.wzfllist = this.wzfl;
      } else {
        this.wzfllist = [];
      }
    },
    //文章对接
    djChange(checkedList) {
      this.djlist = checkedList;
    },
    //库存方式
    kcChange(checkedList) {
      this.kclist = checkedList;
    },

    langChange(checkedList) {
      this.langlist = checkedList;
    },

    khmcSearch(value) {
      this.khsearch = value;
      this.getsiteGsmcList(this.khsearch);
    },
    //获取客户列表
    getsiteGsmcList(value) {
      this.axios
        .post(
          "quanxian/siteGsmcList.php",
          qs.stringify({
            filed: value
          })
        )
        .then(res => {
          if (res.data.code == 303) {
            this.GsmcList = res.data.result;
          }
        });
    },
    //获取产品分类
    getProductList(value) {
      this.axios
        .post(
          "quanxian/siteProductList.php",
          qs.stringify({
            gswlid: value
          })
        )
        .then(res => {
          this.cpfl = [];
          if (res.data.code == 303) {
            for (var i = 0; i < res.data.result.length; i++) {
              this.cpfl.push(res.data.result[i].fd_hymc);
            }
          } else {
            this.cpfl = [];
          }
        });
    },
    //获取品牌
    getBrandList(value) {
      this.axios
        .post(
          "quanxian/siteBrandList.php",
          qs.stringify({
            gswlid: value
          })
        )
        .then(res => {
          this.pp = [];
          if (res.data.code == 303) {
            for (var i = 0; i < res.data.result.length; i++) {
              this.pp.push(res.data.result[i].fd_hymc);
            }
          } else {
            this.pp = [];
          }
        });
    },
    //获取文章分类
    getArticleList() {
      this.axios.post("quanxian/siteArticleList.php").then(res => {
        this.wzfl = [];
        if (res.data.code == 303) {
          for (var i = 0; i < res.data.result.length; i++) {
            this.wzfl.push(res.data.result[i].cname);
          }
        } else {
          this.wzfl = [];
        }
      });
    },

    //获取应用领域文章标题
    getApplicationFields() {
      this.axios.post("quanxian/siteApplicationFields.php").then(res => {
        this.ApplicationFields = [];

        for (var i = 0; i < res.data.result.data.length; i++) {
          this.ApplicationFields.push(res.data.result.data[i].title);
        }
        console.log("this.ApplicationFields", this.ApplicationFields);
      });
    },

    //创建网站---提交
    cjwzsub() {
      if (this.khmc != "" && this.ymbd != "") {
        for (var i = 0; i < this.langlist.length; i++) {
          if (this.langlist[i] == "中文") {
            this.langnum.push(0);
          }
          if (this.langlist[i] == "英文") {
            this.langnum.push(1);
          }
          if (this.langlist[i] == "德文") {
            this.langnum.push(2);
          }
          if (this.langlist[i] == "日文") {
            this.langnum.push(3);
          }
          if (this.langlist[i] == "俄文") {
            this.langnum.push(4);
          }
        }

        this.axios
          .post(
            "quanxian/siteAdminAdd.php",
            qs.stringify({
              gsmc: this.khmc,
              sqdwid: this.khsqdwid,
              domainName: this.ymbd,
              siteClass: this.wzlxval,
              template: this.xzmbpicname,
              sync: this.wztb,
              sampleState: this.ybval,
              sample: this.djyblist,
              productClass: this.cpfllist,
              brandClass: this.pplist,
              articleClass: this.wzfllist,
              Docking: this.djlist,
              language: this.langnum,
              kctype: this.kclist,
              applicationList: this.applicationList
            })
          )
          .then(res => {
            if (res.data.code == 303) {
              this.langnum = [];
              this.$notification["success"]({
                message: "成功",
                description: res.data.msg
              });
            } else {
              this.langnum = [];
              this.$notification["error"]({
                message: "失败",
                description: res.data.msg
              });
            }
          });
      } else {
        this.langnum = [];
        this.$notification["error"]({
          message: "失败",
          description: "客户跟域名不能为空！"
        });
      }
    }
  },
  components: {
    headerComm
  },
  created() {
    this.getsiteGsmcList(this.khsearch);
    this.getProductList();
    this.getBrandList();
    this.getArticleList();
    this.getApplicationFields();
  }
};
</script>

<style lang='less'>
.cjwzym {
  width: 98%;
  height: auto;
  box-shadow: 0px 0px 7px #ccc;
  background-color: #fff;
  margin: 9px auto;
  position: relative;
  top: 63px;
  text-align: left;
  padding: 30px 77px;
  .cjwz_inp {
    ul {
      border: 1px solid #ccc;
      li {
        margin: 20px 0;
        .inp_tit {
          display: inline-block;
          width: 180px;
          text-align: right;
        }
        .mbimg {
          width: 50px;
          height: 50px;
        }
        .ant-checkbox-group {
          width: 70%;
          vertical-align: top;
        }
        .ant-checkbox-group-item {
          width: 130px;
        }
      }
      .button {
        text-align: center;
        .cjwz_sub {
          width: 155px;
          height: 44px;
        }
      }
      .yb {
        .ant-radio-group {
          vertical-align: top;
        }

        .ant-radio-wrapper {
          margin-bottom: 10px;
        }
        .qx {
          margin-top: -31px;
          margin-left: 280px;

          .ant-checkbox-wrapper {
            margin: 0 !important;
          }
        }
      }
    }
  }
}
</style>
